禮拜一上工囉！證明我來豆芽班不是來睡覺的XD

技術筆記

請容許我這次站在巨人的肩膀上，我通常是讀完文章後，馬上在空白筆記上開始從大方向架構到細節輸出，寫完再回頭與文章比較辨別改正，未來在記憶模糊時，回頭查看筆記可以很快的連結大部分資訊，有點像是我的關鍵字庫，所以我把參考的資料放在前面，建議先去看過巨人的大作再來看小抄筆記喔！如果有理解錯誤的地方，也麻煩各位大大指正。

JavaScript發展歷程

參考資料

平時沒注意的 JavaScript - JS 生態系及週邊工具整理系列

• 你所不知道的 JavaScript 模組化歷史，NPM & Module
• JavaScript 如何越來越像正常的語言 - 前端模組化早期歷史( YUI + scope)
• 不只是瀏覽器！JavaScript 征服世界的第一步 - Node.js (Day 8)
• 什麼？！我們竟然有 3 個標準？ - 你有聽過 CommonJS 嗎？(Day9)
• 歡迎來到大分叉時代 - AMD 與 CommonJS 的發展
• 史上最強套件管理 - NPM ， npm init 與 npm install (Day11)
• NPM Install 到底做了些什麼？node_modules 檔案結構 + 特性入門
• package-lock.json 有什麼用，淺談 Yarn, NPM5 與 npm shrinkwrap

Javascript

• 標準化語言
• 在網路上無法如python等找到可直接下載的載點
• 供大家自行開發,造成標準不一的亂象

原生JavaScript缺點

• 沒有模組化:最早開發出的模組化套件為2009的YUI,但很手工,包括程式手動包來包去,以變數方式手動加入dependency
• 原生html只提供用script方式載入js,檔案一多會變很亂,且script會有載入順序問題
• 沒有管理機制方便CRUD模組
• 各函式庫之間的依賴(dependancy)問題

JavaScript 三個模組標準

• common.js

  • 宣告require.export模組語法
  • 早期叫server.js,後來想進一步推廣到瀏覽器,改名叫common.js
  • 最早採用此標準的runtime就是node.js
  • 同步loading的模組化規範,但在瀏覽器環境中,載入模組速度沒有在伺服器那麼快,牽涉到網路速度

• AMD

  • 因common.js為同步模組,在瀏覽器上跑很慢,common.js流派產生分歧而另外獨立出AMD
  • 嘗試開發出專屬瀏覽器（前端）使用的模組標準
  • 因為語法跟common.js分歧,所以無法在前端project使用任何commonjs style的node函式庫
  • 開發自己的前端runtime-Require.js
  • 開發速度比不上common.js派後式微

• ES6

  • 在package.json檔案內標明'type:module'可用
  • 提供import&export module
  • 因為較新,可能遇上執行環境不支援情況,則須加裝編譯器如babel(為解決標準不通用的問題,logo標語compiling es6 code with babel)

• 開發模組化歷史：yui -> common.js -> AMD(開發速度不如common.js後式微)

npm

• 套件管理工具

• npm init後檔案夾會自動出現package.json及node.modules

• node.modules：npm把該專案所需要的套件裝在該專案底下,保持每個專案永遠不會相衝突

• 當下載其中一套會自動幫你下載所有此套件所需要的套件,非常方便

• 上傳到網路上時只會上傳package.json相對於需要載的套件list,不會直接上傳node.modules,待需要的人下載到本地後再根據package.json執行npm install裝回所需套件

• 解決package.json沒有紀錄其他dependency版本的三種選擇

  • npm shrinkwrap
    • npm5以前
    • 有了package-lock.json後不太更新
    • 如用到很古早以前的套件版本,再考慮用它
    • 每次install後須手動更新套件版本
  • package-lock.json
    • npm5以後
    • 每次install後會自動更新套件版本,此為與npm shrinkwrap的差異點
    • 缺點是永遠必須在網路上下載,即便有時在其他檔案已載過,較耗時
  • yarn.lock
    • Yarn為facebook為解決npm缺點而創
      • 本身的資料庫還是npm
      • 如其他檔案有載過,會直接在本地下載,即平行下載概念
      • yarn.lock:yarn自己的lock檔
        • 格式較易讀
        • 終端界面較漂亮

心得

雖然去了解這些來龍去脈需要花一些時間，但整個釐清後對環境建置很有幫助，一開始在全然毫無所知的情況下，光想到我要怎麼把環境架起來，就夠讓我害怕了，然而在把這些發展過程順了幾次後，會知道每個步驟有他的理由，也就不會充滿問號，順利許多。

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

上禮拜六啾啾吃孔雀餅乾配牛奶當早餐
拿起餅乾要放進牛奶時失手
餅乾瞬間掉進杯裏
牛奶濺起
啾回頭對我說：
媽媽，孔雀餅乾打噴嚏，把牛奶灑出來了
我：你確定不是你用的？
啾：不是我，是餅乾打噴嚏！（表情堅定）